<template>
  <div>
    <div class="Htitle">
      <h2>寻亲专区</h2>
      <p><i></i><b>Seeking the area</b><i></i></p>
      <span>无论你在哪里，都要找到你——寻亲到天涯！</span>
    </div>
    <ul class="ul tab_ul">
      <li
        v-for="(item, index) in [
          '家寻亲人',
          '亲人寻家',
          '救助专栏',
          '公安协助专栏',
          '海外寻亲',
        ]"
        :key="index"
        @click="handleClick(index)"
      >
        <span>{{ item }}</span>
      </li>
    </ul>

    <div v-if="current == 0" class="seeklist">
      <dl class="personlist">
        <dd onclick='detail("b7e7ae768e8847b3b52cae744b6449eb",0)'>
          <a href="javascript:;">
            <div class="pic">
              <div class="mask">
                <div class="personinfo">
                  <p class="name" title="无名氏">无名氏</p>
                  <p class="sexheight">女/35岁/160.0厘米</p>
                  <p class="other">区域：</p>
                  <p class="other">救助单位：顺庆区救助管理站</p>
                  <p class="other">发布日期：2022-02-22</p>
                </div>
              </div>
              <img
                src="https://lljz.mca.gov.cn/jmgc-relief-seeking/common/getFileFromDfs/3e61922645824e3690a1cde12e7103ec"
                alt="xxxx"
              />
              <p class="outname">无名氏</p>
            </div>
            <p class="wearAdd" title="顺庆区救助管理站">顺庆区救助管理站</p>
          </a>
        </dd>
        <dd onclick='detail("119e420dd5fb4cb98589f3f27308ec33",0)'>
          <a href="javascript:;"
            ><div class="pic">
              <div class="mask">
                <div class="personinfo">
                  <p class="name" title="无名氏">无名氏</p>
                  <p class="sexheight">男/40岁/153.0厘米</p>
                  <p class="other">区域：</p>
                  <p class="other">救助单位：平利县救助管理站</p>
                  <p class="other">发布日期：2022-02-23</p>
                </div>
              </div>
              <img
                src="https://lljz.mca.gov.cn/jmgc-relief-seeking/common/getFileFromDfs/2a390928539946ca9cef4ddc2bf60e59"
                alt=""
              />
              <p class="outname">无名氏</p>
            </div>
            <p class="wearAdd" title="平利县救助管理站">平利县救助管理站</p></a
          >
        </dd>
        <dd onclick='detail("119e420dd5fb4cb98589f3f27308ec33",0)'>
          <a href="javascript:;"
            ><div class="pic">
              <div class="mask">
                <div class="personinfo">
                  <p class="name" title="无名氏">无名氏</p>
                  <p class="sexheight">男/40岁/153.0厘米</p>
                  <p class="other">区域：</p>
                  <p class="other">救助单位：平利县救助管理站</p>
                  <p class="other">发布日期：2022-02-23</p>
                </div>
              </div>
              <img
                src="https://lljz.mca.gov.cn/jmgc-relief-seeking/common/getFileFromDfs/2a390928539946ca9cef4ddc2bf60e59"
                alt=""
              />
              <p class="outname">无名氏</p>
            </div>
            <p class="wearAdd" title="平利县救助管理站">平利县救助管理站</p></a
          >
        </dd>
        <dd onclick='detail("119e420dd5fb4cb98589f3f27308ec33",0)'>
          <a href="javascript:;"
            ><div class="pic">
              <div class="mask">
                <div class="personinfo">
                  <p class="name" title="无名氏">无名氏</p>
                  <p class="sexheight">男/40岁/153.0厘米</p>
                  <p class="other">区域：</p>
                  <p class="other">救助单位：平利县救助管理站</p>
                  <p class="other">发布日期：2022-02-23</p>
                </div>
              </div>
              <img
                src="https://lljz.mca.gov.cn/jmgc-relief-seeking/common/getFileFromDfs/2a390928539946ca9cef4ddc2bf60e59"
                alt=""
              />
              <p class="outname">无名氏</p>
            </div>
            <p class="wearAdd" title="平利县救助管理站">平利县救助管理站</p></a
          >
        </dd>
        <dd onclick='detail("119e420dd5fb4cb98589f3f27308ec33",0)'>
          <a href="javascript:;"
            ><div class="pic">
              <div class="mask">
                <div class="personinfo">
                  <p class="name" title="无名氏">无名氏</p>
                  <p class="sexheight">男/40岁/153.0厘米</p>
                  <p class="other">区域：</p>
                  <p class="other">救助单位：平利县救助管理站</p>
                  <p class="other">发布日期：2022-02-23</p>
                </div>
              </div>
              <img
                src="https://lljz.mca.gov.cn/jmgc-relief-seeking/common/getFileFromDfs/2a390928539946ca9cef4ddc2bf60e59"
                alt=""
              />
              <p class="outname">无名氏</p>
            </div>
            <p class="wearAdd" title="平利县救助管理站">平利县救助管理站</p></a
          >
        </dd>
        <dd onclick='detail("119e420dd5fb4cb98589f3f27308ec33",0)'>
          <a href="javascript:;"
            ><div class="pic">
              <div class="mask">
                <div class="personinfo">
                  <p class="name" title="无名氏">无名氏</p>
                  <p class="sexheight">男/40岁/153.0厘米</p>
                  <p class="other">区域：</p>
                  <p class="other">救助单位：平利县救助管理站</p>
                  <p class="other">发布日期：2022-02-23</p>
                </div>
              </div>
              <img
                src="https://lljz.mca.gov.cn/jmgc-relief-seeking/common/getFileFromDfs/2a390928539946ca9cef4ddc2bf60e59"
                alt=""
              />
              <p class="outname">无名氏</p>
            </div>
            <p class="wearAdd" title="平利县救助管理站">平利县救助管理站</p></a
          >
        </dd>
        <dd onclick='detail("119e420dd5fb4cb98589f3f27308ec33",0)'>
          <a href="javascript:;"
            ><div class="pic">
              <div class="mask">
                <div class="personinfo">
                  <p class="name" title="无名氏">无名氏</p>
                  <p class="sexheight">男/40岁/153.0厘米</p>
                  <p class="other">区域：</p>
                  <p class="other">救助单位：平利县救助管理站</p>
                  <p class="other">发布日期：2022-02-23</p>
                </div>
              </div>
              <img
                src="https://lljz.mca.gov.cn/jmgc-relief-seeking/common/getFileFromDfs/2a390928539946ca9cef4ddc2bf60e59"
                alt=""
              />
              <p class="outname">无名氏</p>
            </div>
            <p class="wearAdd" title="平利县救助管理站">平利县救助管理站</p></a
          >
        </dd>
        <dd onclick='detail("119e420dd5fb4cb98589f3f27308ec33",0)'>
          <a href="javascript:;"
            ><div class="pic">
              <div class="mask">
                <div class="personinfo">
                  <p class="name" title="无名氏">无名氏</p>
                  <p class="sexheight">男/40岁/153.0厘米</p>
                  <p class="other">区域：</p>
                  <p class="other">救助单位：平利县救助管理站</p>
                  <p class="other">发布日期：2022-02-23</p>
                </div>
              </div>
              <img
                src="https://lljz.mca.gov.cn/jmgc-relief-seeking/common/getFileFromDfs/2a390928539946ca9cef4ddc2bf60e59"
                alt=""
              />
              <p class="outname">无名氏</p>
            </div>
            <p class="wearAdd" title="平利县救助管理站">平利县救助管理站</p></a
          >
        </dd>
        <dd onclick='detail("119e420dd5fb4cb98589f3f27308ec33",0)'>
          <a href="javascript:;"
            ><div class="pic">
              <div class="mask">
                <div class="personinfo">
                  <p class="name" title="无名氏">无名氏</p>
                  <p class="sexheight">男/40岁/153.0厘米</p>
                  <p class="other">区域：</p>
                  <p class="other">救助单位：平利县救助管理站</p>
                  <p class="other">发布日期：2022-02-23</p>
                </div>
              </div>
              <img
                src="https://lljz.mca.gov.cn/jmgc-relief-seeking/common/getFileFromDfs/2a390928539946ca9cef4ddc2bf60e59"
                alt=""
              />
              <p class="outname">无名氏</p>
            </div>
            <p class="wearAdd" title="平利县救助管理站">平利县救助管理站</p></a
          >
        </dd>
        <dd onclick='detail("119e420dd5fb4cb98589f3f27308ec33",0)'>
          <a href="javascript:;"
            ><div class="pic">
              <div class="mask">
                <div class="personinfo">
                  <p class="name" title="无名氏">无名氏</p>
                  <p class="sexheight">男/40岁/153.0厘米</p>
                  <p class="other">区域：</p>
                  <p class="other">救助单位：平利县救助管理站</p>
                  <p class="other">发布日期：2022-02-23</p>
                </div>
              </div>
              <img
                src="https://lljz.mca.gov.cn/jmgc-relief-seeking/common/getFileFromDfs/2a390928539946ca9cef4ddc2bf60e59"
                alt=""
              />
              <p class="outname">无名氏</p>
            </div>
            <p class="wearAdd" title="平利县救助管理站">平利县救助管理站</p></a
          >
        </dd>
        <dd onclick='detail("119e420dd5fb4cb98589f3f27308ec33",0)'>
          <a href="javascript:;"
            ><div class="pic">
              <div class="mask">
                <div class="personinfo">
                  <p class="name" title="无名氏">无名氏</p>
                  <p class="sexheight">男/40岁/153.0厘米</p>
                  <p class="other">区域：</p>
                  <p class="other">救助单位：平利县救助管理站</p>
                  <p class="other">发布日期：2022-02-23</p>
                </div>
              </div>
              <img
                src="https://lljz.mca.gov.cn/jmgc-relief-seeking/common/getFileFromDfs/2a390928539946ca9cef4ddc2bf60e59"
                alt=""
              />
              <p class="outname">无名氏</p>
            </div>
            <p class="wearAdd" title="平利县救助管理站">平利县救助管理站</p></a
          >
        </dd>
        <dd onclick='detail("119e420dd5fb4cb98589f3f27308ec33",0)'>
          <a href="javascript:;"
            ><div class="pic">
              <div class="mask">
                <div class="personinfo">
                  <p class="name" title="无名氏">无名氏</p>
                  <p class="sexheight">男/40岁/153.0厘米</p>
                  <p class="other">区域：</p>
                  <p class="other">救助单位：平利县救助管理站</p>
                  <p class="other">发布日期：2022-02-23</p>
                </div>
              </div>
              <img
                src="https://lljz.mca.gov.cn/jmgc-relief-seeking/common/getFileFromDfs/2a390928539946ca9cef4ddc2bf60e59"
                alt=""
              />
              <p class="outname">无名氏</p>
            </div>
            <p class="wearAdd" title="平利县救助管理站">平利县救助管理站</p></a
          >
        </dd>
        <el-button type="primary">测试</el-button>
      </dl>
    </div>
    <div v-if="current == 1">
      <p>222</p>
      <div class="block">
        <span class="demonstration">页数较少时的效果</span>
        <el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
      </div>
      <div class="block">
        <span class="demonstration">大于 7 页时的效果</span>
        <el-pagination layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </div>
    <div v-if="current == 2">
      <p>333</p>
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
    <div v-if="current == 3">
      <p>444</p>
      <div class="block">
        <span class="demonstration">完整功能</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
    <div v-if="current == 4">
      <p>555</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "SeekArea",

  data() {
    return {
      // tab栏的核心是当前下标的变量
      current: 0,
      left: "-227.75px",
    };
  },

  mounted() {},

  methods: {
    // 点击的时候改变current
    handleClick(index) {
      this.current = index;
    },
  },
};
</script>

<style lang="css" scoped>
.block {
  text-align: center;
}
.Htitle {
  text-align: center;
  padding: 50px 0;
}
h2 {
  margin: 0;
  color: #333;
  font-size: 30px;
  font-weight: normal;
}
p {
  margin: 0;
}
i {
  display: inline-block;
  vertical-align: middle;
  height: 1px;
  width: 193px;
  background: #e1e1e1;
}
p b {
  display: inline-block;
  font-family: Arial;
  color: #cccccc;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: normal;
  margin: 10px 25px;
}
span {
  display: block;
  color: #666;
  font-size: 16px;
}

.Home3 {
  padding-bottom: 20px;
}
.tab_ul {
  text-align: center;
  padding-bottom: 50px;
}
li {
  display: inline-block;
  padding: 0 10px;
  color: #a5a5a5;
  background: url(./images/Home3_line.png) no-repeat right 13px;
}
li.end {
  background: none;
}
li span {
  padding: 0 36px 10px 28px;
  display: inline-block;
  height: 34px;
  line-height: 34px;
  font-size: 18px;
  cursor: pointer;
}
li span:hover,
li.on span {
  background: url(./images/Home3_tab_on.png) no-repeat center top;
  color: #fff;
}
.tab_list {
  width: 1200px;
}
.seeklist {
  padding: 20px;
  background: #fff;
  min-width: 1160px;
  width: 1164px;
  margin: 0 auto;
}
.personlist {
  margin-top: 20px;
  min-height: 265px;
  padding-left: 20px;
  overflow: hidden;
}
.personlist dd {
  width: 165px;
  margin-bottom: 30px;
  margin-right: 25px;
  transition: 0.4s;
  float: left;
}
.pic {
  position: relative;
  width: 165px;
  height: 219.99px;
}
.pic img {
  width: 100%;
  height: 100%;
}
.mask {
  /* 隐藏遮罩层 */
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(22, 99, 159, 0.6);
}
.pic:hover .mask {
  display: block;
}
.personinfo p {
  margin: 0 5px 0;
  color: #fff;
}
.personinfo .name {
  font-size: 14px;
  line-height: 30px;
  margin-top: 0;
}
.personinfo .sexheight {
  margin: 0px 5px;
}
.personinfo .other {
  line-height: 25px;
}
.personlist dd .outname {
  font-size: 16px;
  color: #0b0400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.55);
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  /* padding: 5px */
}
.personlist dd:hover {
  /*  border: 1px solid #fff;*/
  box-shadow: 0 0 5px #666;
}
.personlist dd:hover .outname {
  display: none;
}
.wearAdd {
  font-size: 14px;
  color: #3d3d3d;
  margin: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>